<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
import { updateProfile, saveMoney } from "../../api/otherServer";
export default {
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  computed: {
    ...mapGetters("usermessage", ["getProfile"]),
    handelMoney() {
      if (this.getProfile.mymoney) {
        return Number(this.getProfile.mymoney).toFixed(2);
      }
    },
  },
  methods: {
    ...mapActions("usermessage", ["setprofileActions"]),
    changeMoney() {
      updateProfile(
        {
          filedname: "mymoney",
          filedvalue: this.getProfile.mymoney + 1000,
        },
        (res) => {
          this.setprofileActions({
            data: {
              ...this.getProfile,
              mymoney: this.getProfile.mymoney + 1000,
            },
          });
          console.log(res);
        }
      );
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<template>
  <van-nav-bar title="我的钱包" left-arrow @click-left="onClickLeft" />
  <div class="container">
    <p class="balance">账户余额</p>
    <p class="balance_money">
      <span>￥</span>
      <span>{{ handelMoney }}</span>
    </p>
  </div>
  <p><button class="recharge" @click="changeMoney">充值</button></p>
  <p class="tixian_con"><button class="recharge">提现</button></p>
</template>
<style lang="scss" scoped>
.container {
  width: 6.89rem;
  // height: 3.32rem;
  margin: 0.35rem 0.3rem 1.43rem;
  background-image: linear-gradient(to top right, #ff5941, #fc923a);
  padding: 0.75rem 0 0.99rem;
  text-align: center;
  border-radius: 10px;
  .balance {
    color: #ffffff;
    font-size: 0.28rem;
  }
  .balance_money {
    color: #fff;
    font-size: 0.94rem;
    margin-top: 0.44rem;
  }
  .balance_money span:nth-child(1) {
    font-size: 0.32rem;
    margin-right: 0.06rem;
  }
}
.recharge {
  width: 6.85rem;
  height: 0.98rem;
  font-size: 0.36rem;
  border: none;
  border-radius: 10px;
  margin-left: 0.28rem;
  background-color: #fd5151;
}
.tixian_con .recharge {
  border: 1px solid #d6d5d6;
  background-color: #fff;
}
</style>
